<template>
  <view class="scroll-right">
    <scroll-view :style="{'height':bottomHeight + 'px'}" :scroll-y="true" :scroll-top="scrollTop">
      <view v-for="(shopCate,i) in shopCateList" :key="i">
        <view class="scroll-item-top">
          <text>/ {{shopCate.cat_name}} /</text>
        </view>
        <view class="scroll-item-bottom">
          <view v-for="(shopCateChildren,j) in shopCate.children" :key="j" class="scroll-item-bottom-item" @click="gotoGoodsList(shopCateChildren)">
              <!-- 由于接口图片都无法使用，这里随便找了一个进行替代 -->
              <!-- <image :src="shopCateChildren.cat_icon"></image> -->
                <image :src="catIcon" class="scroll-item-bottom-image"></image>
                <text class="scroll-item-bottom-text">{{shopCateChildren.cat_name}}</text>
          </view>
        </view>
        
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name:"cate-bottom-right",
    props: ['bottomHeight','activeId'],
    data() {
      return {
        shopCateList: [],
        catIcon: 'https://api-hmugo-web.itheima.net/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg',
        scrollTop: 0
      };
    },
    methods: {
      async getChildrenContent(activeId) {
        await uni.$http.get('/api/public/v1/categories').then(res => {
          if (res.data.meta.status !== 200) {
            return uni.$showMsg()
          }
          this.shopCateList = res.data.message[activeId].children
        })
        this.resetScrollTop()
      },
      resetScrollTop() {
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      gotoGoodsList(item) {
        uni.navigateTo({
          url: '/subpkg_goods/goods_list/goods_list?cid=' + item.cat_id
        })
      }
    },
    watch: {
      activeId: function(newData,oldData) {
        this.getChildrenContent(newData)
      }
    },
    created() {
      this.getChildrenContent(this.activeId)
    }
  }
</script>

<style lang="scss" scoped>
.scroll-right {
}
.scroll-item-top {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0; 
}
.scroll-item-bottom {
  display: flex;
  flex-wrap: wrap;
  
  .scroll-item-bottom-item {
    width: 33.33%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .scroll-item-bottom-image {
    width: 60px;
    height: 60px;
  }
  
  .scroll-item-bottom-text {
    font-size: 12px;
  }
}


</style>